<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shader</title>
</head>
<body style="margin: 0;">
    <div id="container"></div>
</body>
<script>
    const uniforms = {
        color: {
            value: 1.0
        }
    }
    let fx = 0
    function updateColor() {
        const v = uniforms.color.value
        if (v < 0) {
            fx = 1
        } else if (v > 1) {
            fx = 0
        }
        uniforms.color.value -= fx === 0 ? 0.01 : -0.01
        requestAnimationFrame(updateColor)
    }
    updateColor()
</script>
<script id="vertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;
    void main() {
        vUv = uv;
        // gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        gl_Position = vec4( position, 1.0 );
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    uniform float color;
    varying vec2 vUv;
    void main() {
        // gl_FragColor = vec4(vec3(0.9, 0.5, 0.8), 1);
        float i = vUv.x;
        i = mod(i * 10.0, 1.0);
        gl_FragColor = vec4(vec3(i, color, 0.5), 1);
    }
</script>
<script src="./js/three.min.js"></script>
<script src="./js/controls/OrbitControls.js"></script>
<script src="./js/base.js"></script>
</html>